import React, { useState } from 'react';
import { Input, Button, Form, Tree } from 'antd';

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
export default function shopFrom(props) {
  const [checkedKeys, setCheckedKeys] = useState([]);
  const [form] = Form.useForm();
  const onFinish = (value) => {
    value.pid = checkedKeys.checked[0];
    value.status = 1;
    props.add(value);
  };
  const onExpand = (expandedKeysValue) => {
    console.log('onExpand', expandedKeysValue);
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };
  const onCheck = (checkedKeysValue) => {
    setCheckedKeys(checkedKeysValue);
  };
  const onReset = () => {
    form.resetFields();
  };
  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item name="name" label="商品类型名称" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item label="上级商品类型">
        <Tree
          checkable
          onExpand={onExpand}
          onCheck={onCheck}
          checkedKeys={checkedKeys}
          checkStrictly
          treeData={props.showData.children}
          style={{ marginTop: '10px' }}
        />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
      </Form.Item>
    </Form>
  );
}
